<template>
  <div class="excellent_pary pdlr-17">
    <yearHeader @confirm-year="confirmYear" :year="year"></yearHeader>
    <hornor-bg>
      <div class="container">
        <p class="item" style="font-size: 15px;" v-for="person in persons">{{ person.pername }}</p>
        <!-- 其他名字 -->
      </div>
    </hornor-bg>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import hornorBg from '../hornorBg/hornorBg.vue'
import { getPartyList } from '@/api/vanguradPosition';
import useYearHooks from '../../hooks/useYearHooks';
import yearHeader from '../yearHeader/yearHeader.vue'

import { IAction } from '@/pages/pay/type';
const { persons, year, getData } = useYearHooks(getPartyList)
onMounted(() => {
  getData()
})

function confirmYear(data: IAction) {
  year.value = String(data.text)
  getData()
}
</script>
<style lang="less" scoped>
.excellent_pary {
  background: url('@/assets/img/yxgcd_bg.png') no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;

    .item {
      font-size: 13px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #89460E;
      text-align: left;
    }
  }

  .container .item::before {
    content: none;
  }

  /* 其他样式和内容 */
  .item {
    margin: 5px;
  }
}
</style>
<style lang="less">
.excellent_pary {
  .hornor_bg {
    padding: 30px;
    box-sizing: border-box;
    padding: 15px;
  }
}
</style>